<template>
  <div class="myArticleHead" id="myArticleHead">
    <div class="myArticleHead-top">
      <a href="javascript:;" :title="$t('userAdmin.article.head.return')">
        <div class="backHome" @click="recovery" id="backHome" style="background-color: transparent">
          <i class="iconfont icon-return" style="font-size: 23px;" id="backHome-icon"></i>
        </div>
      </a>
      <router-link to="/userAdminPage/myArticle/aboutError">
        <div v-if="this.component == 'error'" style="font-weight: bolder">{{$t('userAdmin.article.head.nav01')}}</div>
        <div v-else >{{$t('userAdmin.article.head.nav01')}}</div>
      </router-link>
      <router-link to="/userAdminPage/myArticle/aboutQuestion">
        <div v-if="this.component == 'question'" style="font-weight: bolder">{{$t('userAdmin.article.head.nav02')}}</div>
        <div v-else >{{$t('userAdmin.article.head.nav02')}}</div>
      </router-link>
    </div>
  </div>
</template>

<script>
    export default {
        name: "UserAdminMyArticle-head",
        data() {
            return {
                keyWord: '',
                component:''
            }
        },
        methods:{
            recovery(){
                document.getElementById("backHome").style.width = "0px"
                document.getElementById("backHome").style.marginLeft = "0px"
                document.getElementById("backHome-icon").style.display = "none"
            },
            toSearch(){
                document.getElementById("backHome").style.width = "30px"
                document.getElementById("backHome").style.marginLeft = "20px"
                document.getElementById("backHome-icon").style.display = "block"
            },
            getComponentClassify(val){
                this.component = val
            },
        }
    }
</script>

<style scoped>
  .myArticleHead{
    margin: 10px auto;
    width: 100%;
    /*width: 800px;*/
    height: 50px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 3px;
    transition: 0.3s;
    letter-spacing: 1px;
    position: relative;
  }
  .myArticleHead-top div{
    float: left;
    height: 30px;
    line-height: 30px;

    color: rgb(41, 41, 41);
    margin-top: 10px;
    margin-left: 20px;
    font-size: 17px;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 3px;
    transition: 0.2s;
  }
  .myArticleHead a:nth-child(1) div{
    float: left;
    width: 0px;
    margin-left: 0px;
    height: 30px;
    color: #707070;
    line-height: 30px;
    padding-left: 0px;
    padding-right: 0px;
    transition: 0.3s;
    overflow: hidden;
  }

  .search{
    height: 40px;
    width: 310px;
    margin-left: 420px;
    background-color: rgba(219, 230, 233, 0.83);
    border-radius: 5px;
    position: absolute;
    top: 6px;
    right: 20px;
  }
  .search input{
    height: 30px;
    width: 250px;
    border-radius: 5px;
    position: absolute;
    top: 4px;
    left: 5px;
    font-size: 13px;
    border: none;
    background-color: transparent;
    padding-left: 10px;
    color: #444444;
    font-weight: normal;
    letter-spacing: 1px;
    font-weight: bolder;
    transition: 0.3s;
  }
  .search input::placeholder{
    color: #7b7b7b;
    font-weight: normal;
  }
  .search input:hover{
    background-color: rgb(246, 246, 246);
  }
  .query{
    height: 32px;
    width: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 5px;
    position: absolute;
    top: 4px;
    right: 5px;
    border: none;
    color: rgb(248, 248, 248);
    transition: 0.2s;
    /*background-color: cadetblue;*/
  }
  .query i{
    font-size: 28px;
    color: #656565;
    /*font-weight: bolder;*/
  }
  .query:hover{
    background-color: rgb(246, 246, 246);
  }

  .myArticleHead-top a div:hover{
    background-color: rgb(228, 228, 228);
  }
  .myArticleHead-top a div:active{
    background-color: rgb(245, 245, 245);
  }
</style>
